@extends('master')

@section('content')
<div class="container">
    <div class="showcase row" id="showcase">
        <div class="large-item">
            <ul>
               	@foreach ($slideshowPictures as $key => $slideshowPicture)
               	<li @if($key == 0) class="active" @endif>
                   	<img data-remote="/picture/info/{{ $slideshowPicture->id }}" data-toggle="modal" data-target="#photo-modal" src="{{ '/uploads/picture/' . $slideshowPicture->middle }}" alt="">
                </li>
               	@endforeach
            </ul>
        </div>
        <div class="small-item">
            <ul>
               	@foreach ($slideshowPictures as $slideshowPicture)
               	<li>
                   	<img src="{{ '/uploads/picture/' . $slideshowPicture->middle }}" alt="">
                </li>
               	@endforeach

            </ul>
        </div>
    </div>

    <div class="row">
        <div class="photographers">
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-01.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-02.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-03.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-04.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-05.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-06.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-07.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/photographer-08.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="topic">
            <ul>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/topic-01.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <img src="img/topic-02.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
@stop




